<template>
  <div class="app-container home">
    <!-- 平台介绍 -->
    <el-row :gutter="20" class="intro-row">
      <el-col :span="24">
        <el-card shadow="hover">
          <h2>欢迎来到闪团购电商平台</h2>
          <p>
            闪团购是国内领先的限时特卖电商平台，专注于为消费者提供超高性价比的商品和优质的购物体验。
            我们通过精选优质供应商，直接与品牌厂商合作，砍掉中间环节，为消费者带来真正的实惠。
          </p>
          <p>
            平台每日更新上百个优质商品，涵盖家居、数码、美妆、服饰、食品等全品类。
            我们的特色是"限时特卖"，每个商品都有超值折扣和购买时限。
          </p>
          <p>
            <el-tag type="success">每日10点上新</el-tag>
            <el-tag type="danger">限时特惠</el-tag>
            <el-tag type="warning">正品保障</el-tag>
          </p>
        </el-card>
      </el-col>
    </el-row>

    <div id="chart">
      <apexchart
        type="area"
        height="350"
        :options="chartOptions"
        :series="series"
      ></apexchart>
    </div>

    <!-- 实时数据展示 -->
    <el-row :gutter="20" class="real-time-row">
      <el-col :xs="24" :sm="12" :md="8" :lg="6">
        <el-card shadow="hover" class="data-card">
          <div class="card-title">今日订单量</div>
          <div class="card-value">8,642</div>
          <div class="card-footer">
            <span class="increase">↑12.5%</span> 较昨日
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6">
        <el-card shadow="hover" class="data-card">
          <div class="card-title">今日销售额</div>
          <div class="card-value">¥1,245,876</div>
          <div class="card-footer">
            <span class="increase">↑8.3%</span> 较昨日
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6">
        <el-card shadow="hover" class="data-card">
          <div class="card-title">活跃用户数</div>
          <div class="card-value">32,156</div>
          <div class="card-footer">
            <span class="increase">↑5.7%</span> 较昨日
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6">
        <el-card shadow="hover" class="data-card">
          <div class="card-title">转化率</div>
          <div class="card-value">3.42%</div>
          <div class="card-footer">
            <span class="decrease">↓0.8%</span> 较昨日
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 销售趋势 - 使用进度条模拟图表 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>近7天销售趋势</span>
          </div>
          <div class="progress-chart">
            <div v-for="(item, index) in salesData" :key="index" class="progress-item">
              <div class="progress-label">{{ item.day }}</div>
              <el-progress
                :percentage="item.percentage"
                :color="customColors[index % customColors.length]"
                :show-text="false"
                :stroke-width="16"
              />
              <div class="progress-value">¥{{ item.amount.toLocaleString() }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 商品类别占比 - 使用环形进度条模拟饼图 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>商品类别占比</span>
          </div>
          <div class="donut-chart">
            <div v-for="(item, index) in categoryData" :key="index" class="donut-item">
              <el-progress
                type="dashboard"
                :percentage="item.percentage"
                :color="customColors[index % customColors.length]"
                :width="120"
              />
              <div class="donut-info">
                <div class="donut-label">{{ item.name }}</div>
                <div class="donut-value">{{ item.percentage }}%</div>
                <div class="donut-amount">¥{{ item.amount.toLocaleString() }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 订单状态分布 - 使用表格展示 -->
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>订单状态分布</span>
          </div>
          <el-table
            :data="orderStatusData"
            style="width: 100%"
            stripe
            border
            :show-header="false"
          >
            <el-table-column prop="status" label="状态">
              <template slot-scope="scope">
                <el-tag :type="statusTagTypes[scope.row.status]">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="count" label="数量" width="120" align="right">
              <template slot-scope="scope">
                {{ scope.row.count.toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column prop="percentage" label="占比" width="120" align="right">
              <template slot-scope="scope">
                <el-progress
                  :percentage="scope.row.percentage"
                  :color="statusColors[scope.row.status]"
                  :stroke-width="12"
                />
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <!-- 热门商品排行 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>本周热销商品TOP10</span>
          </div>
          <el-table
            :data="hotProducts"
            style="width: 100%"
            stripe
            border
          >
            <el-table-column prop="rank" label="排名" width="80" align="center"></el-table-column>
            <el-table-column prop="name" label="商品名称"></el-table-column>
            <el-table-column prop="category" label="类别" width="120"></el-table-column>
            <el-table-column prop="sales" label="销量" width="120" align="center">
              <template slot-scope="scope">
                {{ scope.row.sales.toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column prop="growth" label="增长" width="120" align="center">
              <template slot-scope="scope">
                <span :class="scope.row.growth.startsWith('+') ? 'increase' : 'decrease'">
                  {{ scope.row.growth }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="stock" label="库存" width="120" align="center">
              <template slot-scope="scope">
                <el-tag :type="scope.row.stock < 100 ? 'danger' : 'success'">
                  {{ scope.row.stock }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      // 自定义颜色
      customColors: ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399'],

      // 销售数据
      salesData: [
        { day: '周一', amount: 152300, percentage: 30 },
        { day: '周二', amount: 182300, percentage: 36 },
        { day: '周三', amount: 192300, percentage: 38 },
        { day: '周四', amount: 162300, percentage: 32 },
        { day: '周五', amount: 212300, percentage: 42 },
        { day: '周六', amount: 252300, percentage: 50 },
        { day: '周日', amount: 232300, percentage: 46 }
      ],

      // 类别数据
      categoryData: [
        { name: '家居用品', amount: 35600, percentage: 35 },
        { name: '数码电子', amount: 28900, percentage: 28 },
        { name: '美妆个护', amount: 24500, percentage: 24 },
        { name: '其他', amount: 12000, percentage: 13 }
      ],

      // 订单状态数据
      orderStatusData: [
        { status: '待付款', count: 1562, percentage: 20 },
        { status: '待发货', count: 1243, percentage: 16 },
        { status: '已发货', count: 982, percentage: 12 },
        { status: '已完成', count: 3562, percentage: 45 },
        { status: '已取消', count: 542, percentage: 7 }
      ],

      series: [{
        name: '销售额',
        data: [3000, 4000, 3500, 5000, 4900, 6000, 7000]
      }],
      chartOptions: {
        chart: { zoom: { enabled: false } },
        colors: ['#409EFF'],
        stroke: { curve: 'smooth' },
        xaxis: {
          categories: ['周一','周二','周三','周四','周五','周六','周日']
        }
      },

      // 状态颜色映射
      statusTagTypes: {
        '待付款': 'warning',
        '待发货': '',
        '已发货': 'info',
        '已完成': 'success',
        '已取消': 'danger'
      },

      statusColors: {
        '待付款': '#E6A23C',
        '待发货': '#409EFF',
        '已发货': '#909399',
        '已完成': '#67C23A',
        '已取消': '#F56C6C'
      },

      // 热销商品数据
      hotProducts: [
        { rank: 1, name: '智能空气炸锅', category: '家居用品', sales: 1562, growth: '+25%', stock: 342 },
        { rank: 2, name: '无线蓝牙耳机', category: '数码电子', sales: 1423, growth: '+18%', stock: 156 },
        { rank: 3, name: '氨基酸洗发水套装', category: '美妆个护', sales: 1286, growth: '+32%', stock: 287 },
        { rank: 4, name: '纯棉四件套', category: '家居用品', sales: 1152, growth: '+12%', stock: 432 },
        { rank: 5, name: '智能手环', category: '数码电子', sales: 986, growth: '+8%', stock: 89 },
        { rank: 6, name: '进口红酒礼盒', category: '食品饮料', sales: 872, growth: '+15%', stock: 123 },
        { rank: 7, name: '真丝围巾', category: '服装配饰', sales: 765, growth: '+5%', stock: 67 },
        { rank: 8, name: '电动牙刷', category: '美妆个护', sales: 698, growth: '+3%', stock: 156 },
        { rank: 9, name: '坚果大礼包', category: '食品饮料', sales: 632, growth: '-2%', stock: 234 },
        { rank: 10, name: '运动T恤', category: '服装配饰', sales: 587, growth: '-5%', stock: 178 }
      ]
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  .intro-row {
    margin-bottom: 20px;

    .el-card {
      background-color: #f8f9fa;
      border: none;

      h2 {
        color: #303133;
        margin-bottom: 15px;
      }

      p {
        color: #606266;
        line-height: 1.6;
        margin-bottom: 10px;
      }

      .el-tag {
        margin-right: 10px;
        margin-bottom: 10px;
      }
    }
  }

  .real-time-row {
    margin-bottom: 20px;

    .data-card {
      text-align: center;
      border: none;
      background-color: #fff;

      .card-title {
        font-size: 14px;
        color: #909399;
        margin-bottom: 10px;
      }

      .card-value {
        font-size: 24px;
        font-weight: bold;
        color: #303133;
        margin-bottom: 10px;
      }

      .card-footer {
        font-size: 12px;
        color: #909399;

        .increase {
          color: #f56c6c;
        }

        .decrease {
          color: #67c23a;
        }
      }
    }
  }

  .chart-row {
    margin-bottom: 20px;

    .el-card {
      border: none;

      .clearfix {
        font-weight: bold;
        color: #303133;
      }
    }
  }

  .progress-chart {
    .progress-item {
      margin-bottom: 15px;

      .progress-label {
        margin-bottom: 5px;
        font-size: 14px;
        color: #606266;
      }

      .progress-value {
        margin-top: 5px;
        text-align: right;
        font-size: 14px;
        color: #303133;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .donut-chart {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

    .donut-item {
      display: flex;
      align-items: center;
      margin: 10px 0;
      width: 50%;

      .donut-info {
        margin-left: 15px;

        .donut-label {
          font-size: 14px;
          color: #606266;
        }

        .donut-value {
          font-size: 18px;
          font-weight: bold;
          color: #303133;
        }

        .donut-amount {
          font-size: 12px;
          color: #909399;
        }
      }
    }
  }

  .increase {
    color: #f56c6c;
  }

  .decrease {
    color: #67c23a;
  }
}
</style>
